<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件，练习</title>
    <style>
        *{
            transition:0.5s;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: rgb(87, 167, 236);
            position: absolute;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* left: 100px; */
            /* top: 100px; */
            /* position:relative; */
        }
    </style>
</head>
<body style="height: 1000px;">
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>
<script>
    /*
        使 div 可以根据不同的方向键，向不同的方向移动
            按左键 ，向左移
            按右键 ，向右移
            按上键 ，向上移
            按下键 ，向下移
    */

    var box1 = document.getElementById("box1");
    document.onkeydown = function(event){
        event = event || window.event;

        // 是否按下，上键
        if(event.keyCode == 38){
            box1.style.top = box1.offsetTop -100 +"px";
        }

        // 是否按下，下键
        if(event.keyCode == 40){
            box1.style.top = box1.offsetTop + 100 +"px";
        }

        // 是否按下，左键
        if(event.keyCode == 37){
            box1.style.left = box1.offsetLeft - 100 +"px";
        }

        // 是否按下，右键
        if(event.keyCode == 39){
            box1.style.left = box1.offsetLeft + 100 +"px";
        }
        return false;
    };
</script>